<template>
  <div class="contain">
    <el-amap-search-box
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    />
    <el-amap
      class="amap-box"
      :zoom="amap.zoom"
      :center="amap.center"
      :plugin="amap.plugin"
      :events="amap.events"
    >
      <!-- 地图标点 -->
      <el-amap-marker :position="marker"></el-amap-marker>
      <!-- <el-amap-control-geolocation :visible="true" @complete="() => {}"></el-amap-control-geolocation> -->
    </el-amap>
  </div>
</template>
<script>
export default {
  name: "Map",
  props: {
    lnglat: {
      type: Array,
      default: () => []
    },
    isClick: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const self = this;
    return {
      searchOption: {
        city: "全国"
        // citylimit: true,
      },
      amap: {
        zoom: 13,
        center: [120.09, 30.89],
        events: {
          init: self.initAMap
        },
        plugin: [
          {
            pName: "MapType",
            defaultType: 1, // 0代表默认，1代表卫星
            showLabel: true,
            showRoad: true, // 路网
            showTraffic: false // 路况
          }
        ]
      },
      marker: [],
      startDraw: false,
      potList: []
    };
  },
  watch: {
    lnglat: {
      handler(e) {
        if (e && e.length > 0) {
          this.amap.center = e;
          this.marker = e;
        } else {
          this.amap.center = [120.09, 30.89];
          this.marker = [120.09, 30.89];
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
              let lat = position.coords.latitude;
              let lng = position.coords.longitude;
              if (lat && lng) {
                this.amap.center = [lng, lat];
                this.marker = [lng, lat];
              }
            });
          }
        }
      },
      deep: true
    }
  },
  created() {
    if (this.lnglat && this.lnglat.length == 2) {
      this.amap.center = [...this.lnglat];
      this.addPointer([...this.lnglat]);
    } else {
      this.amap.center = [120.09, 30.89];
      this.marker = [120.09, 30.89];
      // 定位
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
          let lat = position.coords.latitude;
          let lng = position.coords.longitude;
          if (lat && lng) {
            this.amap.center = [lng, lat];
            this.marker = [lng, lat];
          }
        });
      }
    }
  },
  mounted() {},
  methods: {
    onSearchResult(pois) {
      this.amap.center = [pois[0].lng, pois[0].lat];
      this.marker = [e.lng, e.lat];
    },
    initAMap(map) {
      this.map = map;
      this.map.on("click", e => {
        if (this.isClick) {
          this.addPointer([e.lnglat.lng, e.lnglat.lat]);
          this.$emit("getLngLat", [e.lnglat.lng, e.lnglat.lat]);
        }
      });
    },
    // 增加标点
    addPointer(position) {
      // 改变中心位置
      this.amap.center = position;
      // 添加标点
      console.log(position);
      this.marker = position;
      // 放大
      this.zoom = 18;
    }
  }
};
</script>
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  .btnDraw {
    position: absolute;
    top: 0;
    z-index: 5;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    background: #409eff;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;

    &.cancel {
      left: 82px;
    }
  }
  .amap-box {
    width: 100%;
    height: 100%;
  }
}
::v-deep {
  .amap-maptypecontrol {
    top: 50px;
    display: none;
  }
  .el-vue-search-box-container {
    width: 200px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    position: absolute;
    top: 0;
    right: 0;
  }
  .el-vue-search-box-container .search-tips ul li {
    min-height: 40px;
    height: auto;
  }
}
</style>
